<template>
  <chart-card
    :title="'运力概况'"
    :updateTime="updateTime"
    @handleRefresh="getTransportSituation"
  >
    <a-row type="flex" justify="space-between">
      <template v-for="item in stastics">
        <stastic-category :key="item.key" :stasticData="item">
        </stastic-category>
      </template>
    </a-row>
  </chart-card>
</template>

<script>
import { StasticCategory, ChartCard } from "./components";
import { getTransportSituation } from "@/services/home";
export default {
  name: "TransportCard",
  data() {
    return {
      stastics: [
        {
          label: "车辆总数",
          num: 3675,
          unit: "台",
          key: "carNum"
        },
        {
          label: "新能源车辆数",
          num: 3075,
          unit: "台",
          key: "newCarNum"
        },
        {
          label: "当前在线车辆",
          num: 2675,
          unit: "台",
          key: "carOnline"
        },
        {
          label: "当前离线车辆",
          num: 1675,
          unit: "台",
          key: "carOffline"
        },
        {
          label: "司机总数",
          num: 3675,
          unit: "人",
          key: "driverNum"
        }
      ],
      updateTime: undefined,
      imgKeys: ["carNum", "newCarNum", "carOnline", "carOffline", "driverNum"]
    };
  },
  mounted() {
    // this.getTransportSituation();
  },
  components: {
    StasticCategory,
    ChartCard
  },
  props: {
    title: String,
    loading: Boolean,
    type: String
  },
  methods: {
    async getTransportSituation() {
      const {
        data: {
          data: { list, updateTime },
          code
        }
      } = await getTransportSituation();
      if (code === 200) {
        this.stastics = list;
        this.stastics.forEach((o, i) => {
          o.unit = "台";
          o.key = this.imgKeys[i];
        });
        this.updateTime = updateTime;
      }
    }
  }
};
</script>

<style scoped lang="less">
</style>
